<template>
  <div class="msg-news">
      <nav class="message-nav">
          <ul>
              <li  @click = "gotoAddress('/me/mymessage')">
                <span>私信</span>
                <b class="number" v-if="unReadMsg!='0'">{{unReadMsg}}</b>
              </li>
              <li @click = "gotoAddress('/me/msgdiscuss')">
                <span>评论</span>
                <b class="number" v-if="unReadPL!='0'">{{unReadPL}}</b>

              </li>
              <!--<li @click = "gotoAddress('/me/msgpraise')">-->
                <!--<span>赞</span>-->
              <!--</li>-->
              <li @click = "gotoAddress('/me/msgfans')">
                <span>新粉丝</span>
                <b class="number" v-if="newFansNum!='0'">{{newFansNum}}</b>

              </li>
              <li class="on" @click = "gotoAddress('/me/msgnews')">
                <span>通知</span>
                <b class="number" v-if="unReadNews!='0'">{{unReadNews}}</b>

              </li>
          </ul>
      </nav>
    <div>
      <div class="no-msg-content" v-if="!boolNotify">
        <div class="no-msg">
          <img src="../../assets/me/03.png" alt="">
        </div>
        <div class="no-text">
          没有相关通知哦！
        </div>
      </div>
      <div class="msg-content" else>
          <ul>

            <li class="clearFix"  v-for="item in notifyList">
              <div class="fl">
                <!--<img class="icon fl" src="https://dummyimage.com/40x40">-->
                <div class="fl font">
                  <!--<p>Atengyaaa</p>-->
                  <p class="guanzhu">{{item.content}}</p>
                </div>
              </div>
              <div class="fr">
                <p>{{item.date_added}}</p>
              </div>
            </li>

          </ul>

          <!--<div class="next-btn" >-->
            <!--<mt-button type="danger" size="large">加载更多</mt-button>-->
          <!--</div>-->

      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

export default {
  name: 'MsgNews',
  data () {
    return {
      notifyList: [],
      boolNotify:false,
      unReadMsg:'0',
      unReadPL:'0',
      unReadNews:'0',
      newFansNum:'0',

    }
  },
  methods: {
    gotoAddress(path){
      this.$router.push(path)
    },
    getUnReadNews:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNewsNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.unReadNews = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },

    getUnReadFans:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getNewFansNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.newFansNum = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    } ,
    getUnReadPL:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.getUnReadNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){

            console.log(res.data);

            _this.unReadPL = res.data.total;



          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },


    getNews:function(){
      var _this = this ;
      var ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url:RouteMap.notify,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
            if(res.data.length==0){
              return
            }
            _this.notifyList = res.data.list;
            if(_this.notifyList.length>0){
              _this.boolNotify = true;
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })

    },

    getUnReadMsg:function(){
      var _this = this;
      var ajaxData1 = {};
      ajaxData1.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
      $.ajax({
        type:'post',
        url: RouteMap.chartNum,
        data:ajaxData1,
        success:function(res){
          if(res.code == 200){
//            console.log(res.data);
            if(utilities.isNull(res.data)){
              return;
            }
//            res.data.num = 1;
            if(res.data.num ==0){

              return;
            }
            _this.unReadMsg = res.data.num;

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    }


  },
  mounted:function(){
  
    this.getUnReadNews();
    this.getUnReadFans();
    this.getUnReadMsg();
    this.getUnReadPL();
    this.getNews();

    var _this = this;
    clearInterval(utilities.timer);
    clearInterval(utilities.timer1);
    utilities.timer = setInterval(function(){

      _this.getUnReadMsg();

    },2000)

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .msg-news{
    padding: 1rem 0.5rem;
  }
  .guanzhu{
    color: #707070;
    margin-top: 0.15rem;
  }
  .msg-content li{
    background:#fff;
    box-sizing:border-box;
    padding:.4rem 0 0.5rem;
    margin-top:.2rem;
    border-bottom: 1px solid #f2f2f2;
  }

  .msg-content li .icon{
    border-radius:50%;
    margin-right:.2rem;
  }
  .msg-content .font{
    margin-left: 0.5rem;
  }
  .msg-content .fr{
    margin-top: .2rem;
    color: #c2c2c2;
  }


  .number{
    font-size: .55rem;
    color:#B01F24;
    position: absolute;
    top: -0.4rem;
    right: 0.2rem;
  }
</style>
